<template>
  <div class="sbody">
    <headMain v-if="!addbsshow && !addbsshowlx" :mensid="mensid" />

    <!-- 图片列表 -->
    <div v-if="!addbsshow && !addbsshowlx" class="tplistbox">
      <div class="bjbox">
        <img src="@/assets/images/bjt.png" alt="" />
      </div>
      <div class="ztnr">
        <div class="tpinputbox">
          <a-input
            class="tpinputzd"
            v-model="formModel.medicineAtlasName"
            placeholder="请输入图谱名称"
            allow-clear
          />
          <div class="tpbutton" @click="onPageChange(1)">搜索</div>
          <div class="tpbutton tpbuttonnthchild" @click="reset">重置</div>
        </div>
        <div class="tpselectbox">
          <van-button type="primary">主要按钮</van-button>
          <div class="selectitembox">
            <div>身体部分:</div>
            <div class="slectbox">
              <div
                class="slectitem"
                @click="bodyPartsIdfn('')"
                :class="formModel.bodyPartsId ? '' : 'slectitemhover'"
                >全部</div
              >
              <div
                :class="
                  formModel.bodyPartsId == item.bodyPartsId
                    ? 'slectitemhover'
                    : ''
                "
                @click="bodyPartsIdfn(item.bodyPartsId)"
                class="slectitem"
                v-for="item in bodyPartdata"
                :key="item.bodyPartsId"
                >{{ item.partsName }}</div
              >
            </div>
          </div>
          <div class="selectitembox">
            <div>所属系统:</div>
            <div class="slectbox">
              <div
                @click="medicineSystemIdfn('')"
                class="slectitem"
                :class="formModel.medicineSystemId ? '' : 'slectitemhover'"
                >全部</div
              >
              <div
                @click="medicineSystemIdfn(item.dictDataId)"
                class="slectitem"
                :class="
                  formModel.medicineSystemId == item.dictDataId
                    ? 'slectitemhover'
                    : ''
                "
                v-for="item in medicineSystemIddata"
                :key="item.dictDataId"
                >{{ item.dictLabel }}</div
              >
            </div>
          </div>
        </div>
      </div>
      <div class="tpmainbox">
        <div class="tpmainleftbox beautifulScroll">
          <div class="tplistitem" v-for="item in tplistdata" :key="item">
            <div class="tplistitemtop">
              {{ item.partsName }}
              <div class="tptillebs"></div>
            </div>
            <div class="tplistman">
              <div
                class="tplistitembox"
                v-for="items in item.atlasList"
                :key="items"
              >
                <div class="tplistitemimg">
                  <!-- 开放标识 -->
                  <div :class="items.status == 0 ? 'kfbsboxs' : 'kfbsbox'">{{
                    items.status == 0 ? '未开放' : '已开放'
                  }}</div>
                  <img :src="`${base + items.url}`" alt="" />
                  <div class="mask">
                    <a-button
                      type="primary"
                      @click="addbs(items.medicineAtlasId, items)"
                      >自学模式</a-button
                    >

                    <a-button
                      type="primary"
                      @click="addbslx(items.medicineAtlasId, items)"
                      >练习模式</a-button
                    >
                  </div>
                </div>
                <div class="tplistitemname" :title="items.medicineAtlasName">{{
                  items.medicineAtlasName
                }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="tpmainrightbox">
          <div class="tplistitemtop"> 人体结构 </div>
          <div class="rtbox">
            <div class="rtimg" v-if="!treeshow">
              <indexty
                class="rtimgdf"
                :permarkers="permarkers"
                @djbwfn="djbwfn"
              />
            </div>
            <div class="rtimgd beautifulScroll" v-if="treeshow">
              <a-tree
                blockNode
                :data="treeData"
                @select="changesd"
                :fieldNames="{
                  key: 'systemId',
                  title: 'systemName',
                  children: 'bodyList',
                  icon: 'customIcon',
                }"
            /></div>
            <div class="rtimg rtimgs">
              <a-button @click="looktree" type="primary" v-if="!treeshow">
                解剖结构
              </a-button>
              <a-button @click="looktrees" type="primary" v-if="treeshow">
                人体结构
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <div class="zwd"></div>
    </div>

    <!-- 自学模式 -->
    <indexadmin
      v-if="addbsshow"
      :addbsshowlx="addbsshowlx"
      :partsName="partsName"
      @goback="goback"
      :imgsrc="imgsrc"
      :imggroup="imggroup"
      :imgclassdata="imgclassdata"
      :medicineAtlasId="medicineAtlasId"
      :atlasTypeName="atlasTypeName"
    />
    <!-- 联系模式 -->
    <!-- <indexlx
      v-if="addbsshowlx"
      :partsName="partsName"
      @goback="goback"
      :imgsrc="imgsrc"
      :imggroup="imggroup"
      :imgclassdata="imgclassdata"
      :medicineAtlasId="medicineAtlasId"
    /> -->
    <!-- logding -->
    <div class="loader-container" v-if="loding">
      <div class="loader"></div>
      <p class="pd">加载中</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import indexlx from '@/views/login/indexlx.vue';
  import headMain from '@/views/headmain/index.vue';
  import { computed, ref, reactive } from 'vue';
  import { Message, Modal, TreeNodeData } from '@arco-design/web-vue';
  import {
    tpList,
    rtbwlist,
    personList,
    tpxqList,
    select,
    getTree,
  } from '@/api/tplist';

  import useLoading from '@/hooks/loading';
  // 当前标识id
  const mensid = ref('1');
  const loding = ref(false);
  const tplistdata = ref([]);
  const addbwShow = ref(false);
  const { loading, setLoading } = useLoading(true);
  const fieldNames = { value: 'bodyPartsId', label: 'partsName' };
  const fieldNamess = { value: 'dictDataId', label: 'dictLabel' };

  import indexadmin from '@/views/login/indexxus.vue';
  import indexty from '@/views/personadmin/indexty.vue';
  import { Pagination } from '@/types/global';

  // 重置
  const reset = () => {
    formModel.value = generateFormModel();
    fetchData();
  };
  // 切换了搜索哦
  const bodyPartsIdfn = (i: string) => {
    formModel.value.bodyPartsId = i;
    onPageChange(1);
  };
  const medicineSystemIdfn = (i: string) => {
    formModel.value.medicineSystemId = i;
    onPageChange(1);
  };
  const djbwfn = (i: string) => {
    formModel.value.bodyPartsId = i;
    onPageChange(1);
  };
  const bodyPartdata = ref([]);
  const bodyPartfieldnames = ref({ value: 'bodyPartsId', label: 'partsName' });
  const treeshow = ref(false);
  const looktree = () => {
    treeshow.value = true;
  };
  const looktrees = () => {
    treeshow.value = false;
  };
  const imgsrc = ref();
  const imggroup = ref([]);
  const imgclassdata = ref([]);
  const addbsshow = ref(false);
  const addbsshowlx = ref(false);
  // const csjishow = ref('测试接受成功');
  const medicineAtlasId = ref('');
  const partsName = ref('');
  const atlasTypeName = ref('');
  const addbs = (
    id: string,
    item: { medicineAtlasName: string; atlasTypeName: string }
  ) => {
    // 自学模式前校验一下
    // if (item.status != '1' || item.status != 1) {
    //   Modal.warning({
    //     title: '提示',
    //     content: '　　　当前图谱暂未开放，请联系管理员!',
    //   });
    //   return;
    // }

    partsName.value = item.medicineAtlasName;
    atlasTypeName.value = item.atlasTypeName;
    // console.log('查询当前名字', item);
    loding.value = true;
    medicineAtlasId.value = id;
    // 查询一下图谱详情
    tpxqList({ medicineAtlasId: id }).then((res: any) => {
      if (res.code == 200) {
        // 判断是否有分组
        // if (res.data.group.length <= 0) {
        //   imgsrc.value = res.data.allImg;
        // } else {
        //   imgsrc.value = res.data.allImg;
        // }
        loding.value = false;
        imgsrc.value = res.data.allImg;
        imggroup.value = res.data.group;
        imgclassdata.value = res.data.classification;
        xqshow.value = false;
        addbsshow.value = true;
      }
    });
  };
  const addbslx = (
    id: string,
    item: { partsName: string; atlasTypeName: string }
  ) => {
    // 自学模式前校验一下
    // if (item.status != '1' || item.status != 1) {
    //   Modal.warning({
    //     title: '提示',
    //     content: '　　　当前图谱暂未开放，请联系管理员!',
    //   });
    //   return;
    // }
    partsName.value = item.partsName;
    atlasTypeName.value = item.atlasTypeName;
    loding.value = true;
    console.log('查询当前名字', item.partsName);

    medicineAtlasId.value = id;
    // 查询一下图谱详情
    tpxqList({ medicineAtlasId: id }).then((res: any) => {
      if (res.code == 200) {
        console.log('图谱详情查询成功', res.data);
        // 判断是否有分组
        if (res.data.group.length <= 0) {
          imgsrc.value = res.data.allImg;
        } else {
          imgsrc.value = res.data.allImg;
        }
        imggroup.value = res.data.group;
        imgclassdata.value = res.data.classification;
        xqshow.value = false;
        addbsshowlx.value = true;
        loding.value = false;
        addbsshow.value = true;
      }
    });
  };

  const fieldNamessd = { value: 'dictDataId', label: 'dictLabel' };
  const goback = () => {
    addbsshow.value = false;
    addbsshowlx.value = false;
  };
  const handleOks = () => {
    xqshow.value = false;
  };
  const handleCancels = () => {
    xqshow.value = false;
  };

  const handleCancelbw = () => {
    addbwShow.value = false;
  };
  const data = reactive([
    {
      key: '1',
      name: '部位1',
    },
  ]);
  const columns = [
    {
      title: '部位名称',
      dataIndex: 'name',
    },
  ];
  const xqshow = ref(false);
  const rules = {
    medicineAtlasName: [
      {
        required: true,
        message: '请输入图谱名称',
      },
    ],
    medicineSystemId: [
      {
        required: true,
        message: '请输入图谱编号',
      },
    ],
    bodyPartsId: [
      {
        required: true,
        message: '请选择人体部位',
      },
    ],
    url: [
      {
        required: true,
        message: '请上传图谱封面',
      },
    ],
    atlasType: [
      {
        required: true,
        message: '请选择图谱类型',
      },
    ],
  };
  const generateDataModel = () => {
    return {
      id: '',
      name: '',
      parentId: '',
    };
  };
  const base = ref((window as any).config.VUE_APP_IMG_API);
  const addForm = ref(generateDataModel());
  const addShow = ref(false);
  const addModel = ref();
  const openAdds = () => {
    addbwShow.value = true;
  };

  const generateFormModel = () => {
    return {
      username: '',
      nickname: '',
      sex: '',
      userType: '',
      medicineSystemId: '',
      bodyPartsId: '',
      medicineAtlasName: '',
      medicineAtlasId: '',
    };
  };
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    // pagination.pageSize = pageSize;
    fetchData();
  };

  const formModel = ref(generateFormModel());
  const permarkers = ref([]);
  //   获取数据更新
  const fetchData = async () => {
    setLoading(true);
    try {
      tpList({
        medicineAtlasName: formModel.value.medicineAtlasName,
        medicineSystemId: formModel.value.medicineSystemId,
        bodyPartsId: formModel.value.bodyPartsId,
      }).then((res) => {
        // console.log('获取图谱列表', res.data);
        tplistdata.value = res.data;
      });
      rtbwlist({}).then((res) => {
        res.data.forEach((item: any) => {
          if (item.partsMark != null) {
            const markingPointsObjects = JSON.parse(item.partsMark);
            markingPointsObjects.bsdata[0].bodyPartsId =
              markingPointsObjects.bodyPartsId;
            const existingMarker = permarkers.value.find(
              (marker: any) => marker.dcomid == markingPointsObjects.dcomid
            );

            if (existingMarker) {
              existingMarker.bsdata.push(...markingPointsObjects.bsdata);
            } else {
              permarkers.value.push(markingPointsObjects);
            }
          }
        });
      });
      personList({}).then((res) => {
        // console.log('请求成功', res.data);

        bodyPartdata.value = res.data.list;
      });
      select({ dictType: 'medicine_system' }).then((res) => {
        medicineSystemIddata.value = res.data;
      });
      // 获取树结构
      getTree({ dictType: 'medicine_system' }).then((res: any) => {
        if (res.code == 200) {
          treeData.value = res.data;
          // console.log('查询树成功', res.data);
        }
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  const treeData = ref([]);
  const changesd = (
    selectedKeys: Array<string | number>,
    data: {
      selected?: boolean;
      selectedNodes: TreeNodeData[];
      node?: TreeNodeData;
      e?: Event;
    }
  ) => {
    // 获取当前点击的节点数据
    const currentNode = data.node as any;
    if (currentNode.medicineAtlasId) {
      formModel.value.medicineAtlasId = currentNode.medicineAtlasId;
      tpList({
        medicineAtlasId: formModel.value.medicineAtlasId,
        medicineAtlasName: formModel.value.medicineAtlasName,
        medicineSystemId: formModel.value.medicineSystemId,
        bodyPartsId: formModel.value.bodyPartsId,
      }).then((res) => {
        tplistdata.value = res.data;
      });
    }

    // console.log('所有被选中的节点:', allSelectedNodes);
    // console.log('当前节点是否被选中:', isSelected);
  };
  const medicineSystemIddata = ref([]);
  //  图谱详情 内容管理
  // const gobw = () => {
  //   xqshow.value = true;
  // };
  fetchData();
</script>

<style scoped>
  .selectitembox {
    display: flex;
    font-size: 16px;
    color: #999999;
    margin: 10px 0;
    /* background-color: red; */
    align-items: center;
  }
  .slectbox {
    display: flex;
    margin-left: 20px;
  }
  .slectitem {
    margin: 0 5px;
    cursor: pointer;
    padding: 5px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 14px;
    background-color: #fff;
    border-radius: 4px;
  }
  .slectitem:hover {
    color: #ffff;
    font-size: 14px;
    background-color: #0c71ff;
  }
  .slectitemhover {
    color: #ffff;
    font-size: 14px;
    background-color: #0c71ff;
  }
  .sbody {
    background: #f5f6fa !important;
  }
  .tpselectbox {
    /* width: 1525px; */
    width: 1200px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    margin-top: 20px;
    padding: 18px 25px;
  }
  .tplistbox {
    display: flex;
    flex-direction: column;
    /* margin: 0 auto; */
    /* margin-top: -150px; */
    position: relative;
    height: auto;
  }
  .ztnr {
    z-index: 99;

    margin: 20px auto;

    display: flex;
    flex-direction: column;
  }
  .tpinputbox {
    display: flex;
  }

  .tpbutton {
    cursor: pointer;
    width: 120px;
    font-size: 18px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    color: #0c71ff;
    margin: 0 10px;
  }
  .tpbuttonnthchild {
    margin-right: 0px;
  }
  .bjbox {
    width: 100%;
    height: 172px;
    position: absolute;
    top: 0;
  }
  .bjbox img {
    width: 100%;
    height: 172px;
  }
  .wbox {
    display: flex;
    flex-direction: column;
  }
  .bwbox {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 100px; /* 添加元素间的间距 */
    width: 100%; /* 设置宽度为100% */
    height: 100%;
    box-sizing: border-box; /* 包含 padding 和 border 在内 */
    justify-content: flex-start; /* 从左边开始对齐 */
  }

  .bwitem {
    flex: 0 0 180px; /* 固定宽度为400px */
    height: 200px;
    cursor: pointer;
    box-sizing: border-box; /* 确保 padding 和 border 在内 */
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    /* 水平居中对齐 */
  }

  /* 在容器的 .bwbox 上应用水平对齐 */
  .bwbox {
    justify-content: flex-start; /* 从左边开始对齐 */
  }
  .bwitemimg {
    width: 180px;
    height: 180px;
    /* background: rgba(0, 255, 221, 0.637); */
  }
  .bwitemimg img {
    width: 180px;
    height: 180px;
  }
  .bwitemdesbox {
    width: 180px;
    display: flex;
    margin: 10px 0;

    /* flex-direction: column;
        margin-left: 15px;
        justify-content: center;
        align-content: center; */
  }
  .bwitemtitle {
    font-size: 16px;
  }
  .bwitemdes {
    margin: 10px 0;
    font-size: 16px;
  }
  .rtimg {
    width: 385px;
  }
  .rtimgd {
    width: 385px;
    height: 635px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .bocd .arco-btn {
    margin: 5px 10px;
  }
  .rtimgs {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 10px;
  }
  .rtimgdf {
    margin-top: -20px;
    background-color: black;
  }
  .tpmainbox {
    display: flex;
    margin: 0 auto;
  }
  .tpmainleftbox {
    height: 800px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .tplistitem {
    width: 810px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    margin: 5px 0;
  }
  .tplistitem:nth-child(1) {
    margin: 0px 0px;
  }
  .tplistitemtop {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 99%;
    font-size: 18px;
    height: 42px;
    padding-left: 20px;
    border-bottom: 1px solid #c9c9c9;
    position: relative;
  }
  .tptillebs {
    position: absolute;
    bottom: 0px;
    width: 37px;
    height: 2px;
    background-color: #0c71ff;
  }
  .tplistman {
    padding: 31px;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 28px; /* 添加元素间的间距 */
    width: 100%; /* 设置宽度为100% */

    justify-content: flex-start; /* 从左边开始对齐 */
  }
  /* 滚动条美化 */
  .beautifulScroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 5px;
  }

  .beautifulScroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666666;
  }
  .tplistitembox {
    cursor: pointer;
    flex: 0 0 230px;
    height: 280px;
    background: #f5f6fa;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #c9c9c9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .tplistitemimg {
    width: 228px;
    height: 229px;
    overflow: hidden;
    position: relative;
  }
  .tplistitemimg:hover .mask {
    opacity: 1;
  }
  .tplistitemimg img {
    width: 228px;
    height: 229px;
  }
  .tplistitemname {
    /* display: flex;
    align-content: center;
    align-items: center; */
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    width: 210px;
    /* background-color: red; */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .tpmainrightbox {
    background: #ffff;
    border-radius: 4px;
    margin-left: 5px;
    height: 735px;
  }
  .zwd {
    height: 20px;
  }
  .rtbox {
    height: 700px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 228px;
    height: 229px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .mask button {
    margin: 10px 0;
  }
</style>
